<template>
  <div>
    <Button type="primary" @click="modal1 = true">添加</Button>
    <Table :columns="columns" :data="data">
      <!-- 图片的插槽 -->
      <template slot-scope="{ row }" slot="img">
        <img :src="row.path" alt="" />
      </template>
      <!-- 发布状态的插槽 -->
      <template slot-scope="{ row }" slot="push">
        <Tag v-if="row.push == 1" color="success">已发布</Tag>
        <Tag v-else color="error">未发布</Tag>
      </template>
      <!-- slot = "acton"  和clolums 实现关联 -->
      <template slot-scope="{ row, index }" slot="hehe">
        <Button
          type="primary"
          size="small"
          style="margin-right: 5px"
          @click="edit(row, index)"
          >修改</Button
        >
        <Poptip confirm title="你确定要删除吗?" @on-ok="remove(row, index)">
          <Button type="error" size="small">删除</Button>
        </Poptip>
      </template>
    </Table>
    <Page :page-size="5" :total="total" @on-change="pageChange" />
    <!-- modal -->
    <Modal v-model="modal1" title="添加轮播图" @on-ok="addBanner">
      <Row>
        <Col span="4">链接:</Col>
        <Col span="12">
          <Input v-model="link" placeholder="Enter something..." />
        </Col>
      </Row>
      <Row>
        <Col span="4">上传:</Col>
        <Col span="8">
          <input type="file" ref="file" />
        </Col>
        <Col span="4">
          <Button @click="upload">上传</Button>
        </Col>
      </Row>
      <Row>
        <Col span="4">缩略图:</Col>
        <Col span="8">
          <img class="img" :src="path" alt="" />
        </Col>
      </Row>
      <!-- 自定义页脚 -->
       <div slot="footer">
            <Button  size="large" @click="addBanner">提交</Button>
       </div>
    </Modal>
  </div>
</template>
<script>
import {
  fileUpload,
  getAllList,
  delBanner,
  updateBanner,
  createBanner,
} from "./service";
export default {
  data() {
    return {
      path: "",
      link: 123,
      modal1: false,
      total: 1,
      columns: [
        {
          title: "id",
          key: "_id",
        },
        {
          title: "path",
          key: "path",
          slot: "img",
        },
        {
          title: "link",
          key: "link",
        },
        {
          title: "发布状态",
          key: "push",
          slot: "push",
        },
        {
          title: "创建时间",
          key: "ctime",
        },
        {
          title: "操作",
          slot: "hehe",
        },
      ],
      data: [],
    };
  },
  methods: {
    async upload() {
      console.log("上传图片");
      console.log(this.$refs.file.files);
      const file = this.$refs.file.files[0];
      const formdata = new FormData();
      formdata.append("hehe", file);
      const res = await fileUpload(formdata);
      const { code, path, msg } = res.data;
      if (code) return this.$Message.warning(msg);
      this.$Message.success(msg);
      this.path = path;
    },
    async addBanner() {
      console.log("添加轮播图");
      if (!this.path || !this.link) {
        return this.$Message.warning("参数缺失");
      }
      const res = await createBanner(this.link, this.path);
      const { code, msg } = res.data;
      if (code) return this.$Message.warning(msg);
      this.$Message.success(msg);
      // 关闭modal
      this.modal1 = false;
      this.getList(1);
    },
    pageChange(page) {
      console.log("页码改变", page);
      this.getList(page);
    },
    async remove(row, index) {
      /*
      根据id调用删除接口 修改数据库数据
      修改完毕后更新整个页面
      */
      console.log("删除", row, index);
      const { _id } = row;
      const res = await delBanner(_id);
      const { code, msg } = res.data;
      if (code) return this.$Message.warning(msg);
      this.$Message.success(msg);
      this.getList(1);
    },
    async edit(row, index) {
      console.log("编辑");
      const id = row._id;
      const pushState = Number(row.push) === 0 ? 1 : 0;
      const res = await updateBanner(id, pushState);
      const { code, msg } = res.data;
      if (code) return this.$Message.warning(msg);
      this.$Message.success(msg);
      this.getList(1);
    },
    async getList(page) {
      const { data } = await getAllList(page, 5);
      const { code, list, count } = data;
      // if(code) return alert("数据请求失败")
      this.data = list || [];
      this.total = count;
      console.log(code, count);
    },
  },
  async mounted() {
    this.getList(1);
  },
};
</script>
<style>
.img {
  width: 100px;
  height: 100px;
}
</style>